<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../../resources/css/uploadcourse.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniu_img_upload.js"></script>
		<script type="text/javascript" src="../../resources/js/moxie.js"></script>
		<script type="text/javascript" src="../../resources/js/plupload.full.min.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniu.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniuMp4Upload.js"></script>
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>

		<div class="main" style="margin: auto;width: 1200px;" >
			<form class="layui-form" method="post">
				<div class="layui-input-block" id="btn" style="width: 200px;">
					<div class="layui-inline uploadclass" id="btn-uploader2">
						<button class="layui-btn layui-btn-danger btnbtn" id="pickfiles2">上传视频</button>
					</div>
<!--					<button type="button" class="layui-btn layui-btn-normal" id="addCourseChapt">添加章节</button>
-->					
					<div class="layui-progress layui-progress-big" lay-filter="demo2" lay-showPercent="true" style="background:white;position:absolute;top:9px;width: 690px;margin-left: 200px;">
						<div class="layui-progress-bar" lay-percent="0%"></div>
					</div>
					<div id="url"></div>
				</div>
				<ul class="course_chapt">
					<li>
						<div class="layui-form-item">
							<label class="layui-form-label">章名称</label>
							<div class="layui-inline">
								<input style="width: 890px;" type="text" required lay-verify="required" id="courseTitle" name="courseTitle" placeholder="请输入内容" class="layui-input" value=""></div>
							<!--<div class="layui-inline">
								<div class="remove">
									<span class="layui-btn layui-btn-normal" id="removeCourse">删除章</span>
								</div>
							</div>-->
							<ul class="course_ul" id="123123">
								<li>
									<div class="layui-inline">
										<label class="layui-form-label">节标题</label>
										<input style="width: 842px;" type="text" required lay-verify="required" id="classTitle" name="classTitle" lay-verify="required" placeholder="请输入内容" class="layui-input" value="">
									</div>
									<!--<div class="layui-inline">
										<span class="layui-btn layui-btn-normal" id="addclass">添加节</span>
									</div>-->
									<div class="layui-inline">
										<label class="layui-form-label">节视频地址</label>
										<input id="classurl" style="width: 842px;" type="text" required lay-verify="required" name="classUrl" lay-verify="required" placeholder="请输入视频地址或上传" class="layui-input courseurl" value="">
									</div>
								</li>

							</ul>
						</div>
					</li>
				</ul>
				<div class="layui-form-item">
					<div class="layui-input-block" id="btn">
						<button class="layui-btn layui-btn-danger" id="courseSubmit" lay-submit="" lay-filter="addcoclass">保存课程章节信息</button>
					</div>
				</div>
			</form>
		</div>
	</body>
	<jsp:include page="/pages/common/footer.jsp"></jsp:include>
	<script>
		var i = 0;
		var j = 0;
		$("#addCourseChapt").on('click', function() {
			var html = "<li> <div class='layui-form-item'> <label class='layui-form-label'>章名称</label> <div class='layui-inline'> <input style='width: 890px;' type='text' required lay-verify='required' name='courseTitle" + i + "' placeholder='请输入标题' class='layui-input' value=''></div> <div class='layui-inline'> <div class='remove'><span class='layui-btn layui-btn-normal' id='removeCourse" + i + "'>删除章</span></div> </div> <ul class='course_ul'> <li> <div class='layui-inline'> <label class='layui-form-label'>节标题</label> <input style='width: 842px;' type='text' required lay-verify='required' name='classTitle" + i + "' lay-verify='required' placeholder='请输入标题' class='layui-input' value=''> </div> <div class='layui-inline'> <span class='layui-btn layui-btn-normal' id='addclass" + i + "'>添加节</span> </div> <div class='layui-inline'> <label class='layui-form-label'>节视频地址</label> <input id='classurl" + i + "' style='width: 842px;' type='text' required lay-verify='required' name='classUrl" + i + "' lay-verify='required' placeholder='请输入视频地址或上传' class='layui-input courseurl' value=''> </div> </li> </ul> </div> </li>";
			$(".course_chapt").append(html);
			i++;
		});
	</script>
	<script>
		$(document).on('click', '.course_ul span', function(e) {
			var v_id = e.target.id;
			j++;
			var html = "<li> <div class='layui-inline'> <label class='layui-form-label'>节标题</label> <input style='width: 842px;' type='text' required lay-verify='required' name='classTitle" + j + "' lay-verify='required' placeholder='请输入标题' class='layui-input' value=''> </div> <div class='layui-inline'> <label class='layui-form-label'>节视频地址</label> <input id='classurl" + j + "' style='width: 842px;' type='text' required lay-verify='required' name='classUrl" + j + "' lay-verify='required' placeholder='请输入视频地址或上传' class='layui-input courseurl' value=''> </div> </li>";
			$("#" + v_id).parent().parent().parent().append(html);
		});
		
		$(document).on('click', '.remove span', function() {
			$(this).parent().parent().parent().remove();
				
		});
	</script>
	<script>
		layui.use("form", function() {
			var form = layui.form;
			form.on('submit(addcoclass)', function(data) {
				layer.msg(JSON.stringify(data.field));
				var courseTitle=$("#courseTitle").val();
				$.ajax({
					type:"post",
					url:"/courseChapter/addCourseChapter.action",
					data:{
						"course.courseId": GetUrlString("courseId"),
						"courseChapters.chapterName": $("#courseTitle").val(),
						"classHour.classHourName":$("#classTitle").val(),
						"classHour.classHourUrl":$("#classurl").val()
					},
	
					dataType:"json",
					success:function(result){
						
					}
				});
			
				return false;
			});

		});
		$(document).ready(function() {
			getTokenMessage();

		});

		function getTokenMessage() {
			$.ajax({
				url: '/qiniu/fileUplaod.action',
				type: 'POST',
				data: {},
				cache: false,
				contentType: false, //不可缺
				processData: false, //不可缺
				dataType: 'json',
				success: function(data) {
					var obj = data;
//					uploaderReady(obj.uptoken);
					uploadMp4(obj.uptoken);
				}
			});
		}
	</script>

</html>